<template>

	<view>
		<view class="content">
			<z-paging ref="paging" :refresher-only="true" refresher-theme-style="white" :fixed="true"
				:show-loading-more-no-more-view='false' :refresher-enabled="false" :refresher-threshold="0"
				hide-refresher-when-reload hide-refresher-when-enabled>

				<template #top>
					<u-navbar :fixed="false" title="设备管理" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
						<view class="u-nav-slot" slot="right">
							<m-capsule></m-capsule>
						</view>
					</u-navbar>
				</template>
				<view class="MainBox2">
					<view class="x-bc">
						<view class="ItemCard">
							<u-icon size="70rpx" name="order" color="#a56fe9"></u-icon>
							<text class="text1">
								{{ReportStatistics.spotcheckcount }}/{{ReportStatistics.spotchecktotal }}</text>
							<text class="text2">保养数</text>
						</view>

						<view class="ItemCard">
							<u-icon size="70rpx" name="edit-pen" color="#82e006"></u-icon>
							<text class="text1">
								{{ReportStatistics.maintenancecount }}/{{ReportStatistics.maintenancetotal }}</text>
							<text class="text2">点检数</text>
						</view>
					</view>

				</view>

				<view class="MainBox">
					<view class="TopBac">


						<view class="CardBox">
							<view class="CardStyle">
								<view class="LeftTitle"
									style="display: flex;justify-content: space-between;align-items: center;">
									<text>每日数据</text>
								</view>
								<view class="ChartBox">
									<view style="flex: 1;">
										<view class="charts-box1" :style="{ width: CellscrollWidth + 'px'}">

											<qiun-data-charts type="line" :opts="Charts1.opts"
												:chartData="Charts1.chartData" />
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="CardBox ListCardBox">
							<view class="CardStyle">
								<view class="LeftTitle">
									<text>维修故障描述</text>
								</view>

								<view class="CardMain">
									<view class="DocumentsList" style="padding: 8px 10px;">

										<uni-row v-if="queryList.length" :gutter="20" class="CardInfo">
											<uni-col v-for="(item,index) in queryList" :key="index"
												style="margin-bottom: 10px;">
												<view>
													<u-cell :title="item.ApplyForTime" class="custom-cell"
														:titleStyle='{color:"#797a7b",fontSize:"12px"}'>
														<template #value>
															<div class="CommonBoxDiv" style="font-size: 14px;"
																:style="{ width: scrollLiftWidth + 'px'}">

																{{item.BXContent}}
															</div>
														</template>
													</u-cell>

												</view>
											</uni-col>
										</uni-row>
										<u-empty v-else text="暂无检验数据" mode="list"></u-empty>

									</view>


								</view>
							</view>
						</view>

					</view>

				</view>


				<template #bottom>
					<tab-bar ref="tabbar" :backData='moduleData_show'></tab-bar>
				</template>
			</z-paging>

		</view>


		<u-popup :show="popup_logout" mode="center" :closeOnClickOverlay="false" :round="4">
			<view class="popup-content">
				<view class="popup-content_close x-c">
					<uni-icons type="closeempty" color="#999" size="20" @click='popup_logout = false'></uni-icons>
				</view>
				<view class="x-c title">
					<text>{{popuptitle}}</text>
				</view>
				<view class="contentView">
					<text>{{popupcontent}}</text>
				</view>
				<view class="btnBox x-ac">
					<u-button type="primary" text="确定" @click="popup_logout = false"></u-button>
				</view>
			</view>
		</u-popup>
	</view>


</template>


<script>
	import TabBar from '@/st_device/common/TabBar.vue'; // 引入底部导航栏组件
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				baseFormData: {
					EquipmentName: '',
					EquipmentID: null
				},
				popup_logout: false,
				popuptitle: '提示',
				popupcontent: '请选择设备',
				PIC_PHList: [{
						name: '点检',
						activeIcon: 'file-text-fill',
						inactiveIcon: 'file-text',
					}, {
						name: '维修',
						activeIcon: 'file-text-fill',
						inactiveIcon: 'file-text',
					},
					{
						name: '保养',
						activeIcon: 'file-text-fill',
						inactiveIcon: 'file-text',
					},
					{
						name: '首页',
						activeIcon: 'home-fill',
						inactiveIcon: 'home',
					}
				],

				moduleData_show: [],
				ModuleID: null,
				ChartsData: {},
				Charts1: {
					chartData: {},
					opts: {
						color: ["#FAC858", "#52aeff", "#91CB74", "#fa231b", "#999999", "#73C0DE", "#3CA272", "#FC8452",
							"#9A60B4", "#ea7ccc"
						],
						padding: [15, 10, 20, 15],
						enableScroll: false,

						legend: {},
						xAxis: {
							disableGrid: true
						},

						yAxis: {
							gridType: "dash",
							dashLength: 2
						},
						extra: {
							line: {
								type: "straight",
								width: 2,
								activeType: "hollow"
							}
						}
					}

				},
				CellscrollWidth: uni.getSystemInfoSync().windowWidth, //列表高度
				scrollLiftWidth: uni.getSystemInfoSync().windowWidth, //列表高度

				queryList: [],
				ReportStatistics: {}
			};
		},
		onLoad() {
			var that = this
			let routes = getCurrentPages().length;
			that.getModuleData();
			that.ModuleID = that.$store.state.appConfigInfo.ActiveModule.ModuleID
			let MesBasicInfo
			if (that.$store.state.GuyueModule.MesBasicInfo && that.$store.state.GuyueModule
				.MesBasicInfo.UserName) {
				if (that.$store.state.appConfigInfo.ActiveModule.ModuleID != that.$store.state.GuyueModule
					.MesBasicInfo.ModuleID) {
					MesBasicInfo = that.addMesBasicInfo()
				} else {
					that.$store.state.UserInfo.UserName = that.$store.state.UserInfo.UserName ? that.$store.state
						.UserInfo
						.UserName : that.$store.state.UserInfo.UserName
					if (that.$store.state.UserInfo.UserName == that.$store.state.GuyueModule
						.MesBasicInfo.UserName) {
						that.$store.state.GuyueModule.MesBasicInfo.TabBarName = '首页'

						MesBasicInfo = that.$store.state.GuyueModule.MesBasicInfo
					} else {
						MesBasicInfo = that.addMesBasicInfo()
					}
				}
			} else {
				MesBasicInfo = that.addMesBasicInfo()
			}
			that.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'MesBasicInfo',
				data: MesBasicInfo
			})

			that.Getopts()
			that.baseFormData.EquipmentName = that.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentName
			that.baseFormData.EquipmentID = that.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentID
			that.GetequipmentReportStatistics()
			that.GetqueryList()
		},
		oshow() {},

		onUnload() {
			uni.$off('st_device_Choice');
		},

		mounted() {
			var that = this;
			this.$nextTick(() => {
				var CellscrollWidth
				uni.createSelectorQuery().select('.ChartBox').boundingClientRect(data => {
					that.CellscrollWidth = data.width;
				}).exec()
				that.scrollLiftWidth = (uni.getSystemInfoSync().windowWidth) / 2
			});

			uni.$on('st_device_Choice', function(ret) {

				if (ret.type == '设备') {
					that.baseFormData.EquipmentName = ret.data.EquipmentName
					that.baseFormData.EquipmentID = ret.data.EquipmentID
					that.$store.state.GuyueModule.MesBasicInfo.warehouse = ret.data

					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfo',
						data: that.$store.state.GuyueModule.MesBasicInfo
					})
				}

			});
		},

		methods: {
			GetequipmentReportStatistics() {
				let that = this;
				that.Request.request('equipmentReportStatistics', {}, function(ret) {
					console.log(ret)
					if (ret.status == 200) {
						that.ReportStatistics.spotchecktotal = ret.data.ds2[0].total ? ret.data.ds2[0].total : 0
						that.ReportStatistics.spotcheckcount = ret.data.ds3[0].count ? ret.data.ds3[0].count : 0
						that.ReportStatistics.maintenancetotal = ret.data.ds[0].total ? ret.data.ds[0].total : 0
						that.ReportStatistics.maintenancecount = ret.data.ds1[0].count ? ret.data.ds1[0].count : 0
					}
				})
			},
			GetqueryList() {
				let that = this;
				uni.showLoading({
					title: '加载数据中...',
				});
				try {

					that.Request.request('showMaintenanceList', {
						FType: "SB"
					}, function(ret) {

						if (ret.status == 200) {
							uni.hideLoading();
							ret.data.ds.map((item) => {
								item.ApplyForTime = item.ApplyForTime ? item.ApplyForTime.split('T')[0] :
									''
								item.BillDate = item.BillDate ? item.BillDate.replace(
									'T', ' ').split('.')[0] : ''
								item.BeginTime = item.BeginTime ? item.BeginTime.replace(
									'T', ' ').split('.')[0] : ''
								item.WCTime = item.WCTime ? item.WCTime.replace('T',
									' ').split('.')[0] : ''
							})
							that.queryList = ret.data.ds
						}
					})
				} catch (e) {
					uni.hideLoading();
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}

			},
			openBaseScreen(str, type) { // 前往筛选页
				let that = this;
				let obj = null;
				let url = '/commonPage/Tool/baseScreen';
				if (str == '设备') {
					obj = {
						allowClear: false,
						cmd: 'getEquipment',
						type: str,
						ListeningName: 'st_device_Choice',
						serverSearch: {
							isPaging: false, //是否分页
							searchKey: 'EquipmentName', //搜索关键词，应包含在param中
							showText: 'EquipmentName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'EquipmentName',
							ChoiceDataData: that.baseFormData.EquipmentID,
						},
						param: {
							EquipmentName: '',
							PageIndex: 1,
							PageSize: 30
						}
					}
				}
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})
				uni.navigateTo({
					url: url
				})
			},

			Getopts() {

				return new Promise((resolve) => {
					this.Request.request('equipmentReportStatistics7Day', {}, (ret) => {

						if (ret.status === 200) {
							var categories = ret.data.ds.map(item => item.day)
							var SBWX = ret.data.ds3.map(item => item.count)
							var SBBY = ret.data.ds2.map(item => item.count)
							var SBDJ = ret.data.ds1.map(item => item.count)
							setTimeout(() => {
								let res = {
									categories: categories,
									series: [{
										name: "点检",
										data: SBDJ
									}, {
										name: "维修",
										data: SBWX
									}, {
										name: "保养",
										data: SBBY
									}]
								};
								this.Charts1.chartData = JSON.parse(JSON.stringify(res));
							}, 500);
						}
						setTimeout(() => {
							this.$refs.paging?.endRefresh();
							resolve();
						}, 100);
					});
				});
			},



			addMesBasicInfo() {
				var MesBasicInfo = {
					ModuleID: this.$store.state.appConfigInfo.ActiveModule.ModuleID,
					UserName: this.$store.state.UserInfo.UserName ? this.$store.state.UserInfo.UserName : this
						.$store
						.state.UserInfo.EmplName,
					openDate: new Date(),
					warehouse: {
						EquipmentID: 0,
						EquipmentName: '',

					},
					TabBarName: '首页',
					Status: {
						ClockStatusTitle: '首页'
					}
				}
				return MesBasicInfo
			},

			getModuleData() { // 获取数据
				let that = this;
				var list = JSON.parse(JSON.stringify(this.$store.state.appConfigInfo.ActiveModule.authPages))

				const processedData = list.map(item => {
					if (item.APFunName && item.APFunName.startsWith("设备")) {
						return {
							...item,
							APFunName: item.APFunName.substring(2)
						};
					}
					return item;
				});

				let backData = this.buildTree(processedData);

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData',
					data: backData
				})
				this.moduleData_show = JSON.parse(JSON.stringify(backData));
			},
			buildTree(items) {
				var that = this
				// 创建一个映射，用于快速查找具有特定ID的菜单项  
				const map = {};
				items.forEach(item => {
					map[item.APPFunID] = item;
					item.children = []; // 初始化子菜单数组  
				});

				// 构建树  
				const tree = [];
				items.forEach(item => {
					// 查找父菜单项，并添加到其children数组中  
					// 如果UpID为0，则它是根节点，直接添加到树数组中  
					that.PIC_PHList.forEach(a => {
						if (a.name == item.APFunName) {
							item.activeIcon = a.activeIcon
							item.inactiveIcon = a.inactiveIcon
						}
					})
					if (item.UpID === 0) {
						tree.push(item);
					} else if (map[item.UpID]) {
						map[item.UpID].children.push(item);
					}
				});
				return tree;
			},

		}
	}
</script>


<style lang="scss">
	@import "./css/index.css";

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-image: linear-gradient(to bottom, rgba(81, 208, 208, 1), rgba(81, 208, 208, 1), rgba(81, 208, 208, 0.7) 30%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));

		.CardStyle {
			background-color: #fff;
			padding: 10px 0;
			border-radius: 12px;
		}
	}



	.u-nav-slot {
		/* min-width: 80px; */
		width: fit-content;
	}



	// 顶部导航栏 navbar点击左侧会有改变透明的的操作，直接强制赋值为1
	.u-navbar__content__left {
		opacity: 1 !important;
	}

	.MainBox2 {
		padding: 5px 10px;

		.ItemCard {
			width: 45%;
			border-radius: 12px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;

			.text1 {
				margin-top: 10rpx;
				font-size: 34rpx;
				font-weight: 600;
			}

			.text2 {
				margin-top: 10rpx;
				font-size: 25rpx;
				color: #999;
			}
		}
	}


	.MainBox {
		flex: 1;
		overflow: auto;

		.TopBac {
			// background-image: linear-gradient(to bottom, rgba(81, 208, 208, 1), rgba(81, 208, 208, 0.7) 30%, rgba(255, 255, 255, 0));
			background-color: transparent;
		}



		.ListCardBox {
			margin: 0 0 30px 0;
		}

		.CardBox {
			padding: 5px 10px;


			.ChartBox {
				display: flex;

				// charts图父盒子
				.charts-box {
					// width: 100%;
					width: 400rpx;
					height: 200px;
					// zoom: .6;
				}

				.charts-box1 {

					height: 200px;

				}

				// 右侧图例盒子
				.RightTextBox {
					flex: 2;
					display: flex;
					align-items: center;

					.GridBox {
						flex: 1;

						.CommonText {
							display: block;
							text-align: center;
							font-size: 32rpx;
							font-weight: 600;
						}

						.BotText {
							margin-top: 14rpx;
							font-size: 20rpx;
							color: #999;
							font-weight: normal;
						}
					}
				}
			}



			// 标题
			.LeftTitle {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 14px;
				font-weight: 600;
				margin-left: 8px;
			}

			// 内容
			.CardMain {
				margin-top: 10px;


				.Dailydata {
					flex: 1;
					margin: 0 auto;
					padding: 5px 10px;
					box-sizing: border-box;

					.Dailydata-box {
						background-color: #f6f6f6;
						border-radius: 8px;
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
						height: 100%;
						// display: flex;
						// flex-direction: column;
						// align-items: center;
						// justify-content: center;
						margin: 10px auto;
						box-sizing: border-box;
					}

				}


				.u-cell {
					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				}

				.custom-cell {
					background-color: transparent !important;

					color: inherit !important;

				}

				// 检验类型
				.grid-text {
					margin-top: 6px;
					font-size: 13px !important;
				}

				// 历史设备

				.UsualCard {
					display: flex !important;
					// position: relative; 
					// min-height: 100rpx;
					background-color: #f6f6f6;
					box-shadow: 1px 1px 13px -9px #999;
					align-items: center !important;
					margin-right: 10px !important;
					padding: 20px 15px !important;
					border-radius: 12px !important;
				}


				.UsualCardBox {

					// 组件在小程序端display为inline
					// QQ、抖音小程序文档写有 :host，但实测不生效
					// 百度小程序没有 :host
					/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
					display: block;
					/* #endif */


					.uni-col {
						margin-top: 10px;
						min-height: 100px;
					}
				}

				// 支付宝小程序没有 UsualCardBox 层级
				// 微信小程序使用了虚拟化节点，没有 UsualCardBox 层级
				/* #ifdef MP-ALIPAY || MP-WEIXIN */
				::v-deep .uni-row {
					margin-bottom: 10px;
				}

				/* #endif */

				.example-body {
					/* #ifndef APP-NVUE */
					display: block;
					/* #endif */
					padding: 5rpx 10rpx 0;
					overflow: hidden;
				}


				// 检验单据
				.DocumentsList {
					padding: 8px 10px;

					.DocumentsListCard {
						background-color: #f6f6f6;
						position: relative;
						border-radius: 12px;
						box-shadow: 1px 1px 12px -9px #333;
						// min-height: 200px;
						// padding: 10px 10px;
						width: 100%;
						margin: 0 auto;

						// 序号
						.ordinal {
							width: 20px;
							height: 20px;
							border-radius: 4px;
							line-height: 20px;
							background-color: #82cdff;
							text-align: center;
							color: #fff;
						}

						// 单据状态
						.TypeTextBox {
							width: fit-content;
							position: absolute;
							top: 30rpx;
							right: 10rpx;
							padding: 4rpx 6rpx;
							transform: rotate(45deg);
							border-radius: 12px;
						}

						.HGStyle {
							color: #51d0d0;
							border: 2px solid #51d0d0;
						}

						.BHGStyle {
							color: #999;
							border: 2px solid #999;
						}

						// 单据编号布局
						.CodeText {
							display: flex;
							align-items: center;
							// margin-top: 6px;
							margin-bottom: 10rpx;
						}



						// 其他单据内容布局
						.DocumentsTopInfo {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 14px;
							flex-wrap: wrap;


							.RowFlex {
								margin-top: 6px;
								flex: 1;
								display: flex;
								align-items: center;
								// min-width: 200px;
							}
						}

						// 单据内容文字样式
						.lebelText1 {
							display: inline-block;
							min-width: 70px;
							font-size: 13px;
							color: #b1b1b1;
							text-align: justify;
						}

						.lebelText {
							display: inline-block;
							min-width: 70px;
							// width: 80px;
							font-size: 13px;
							color: #b1b1b1;
							text-align: justify;
							height: 20px;

							&::after {
								content: "";
								display: inline-block;
								width: 100%;
							}
						}

						.valueText {
							font-size: 13px;
						}
					}
				}
			}
		}

	}
</style>